
<form action="{:url('config/sort')}" method="post" class="form-horizontal" id="form-sort">
	<div class="sort_center form-group">
		<div class="sort_option pull-left">
			<select id="select-sort" size="18" style="width: 400px; margin-left: 10px;" class="form-control"> {notempty name="data_list"} {volist
				name="data_list" id="info"}
				<option class="option-ids" title="{$info.title}" value="{$info.id}">{$info.name} ( {$info.title} )</option> {/volist}{/notempty}
			</select>
		</div>
		<div class="sort_btn pull-left" style="padding-left: 20px;">
			<button class="top btn btn-primary btn-block" type="button">第 一</button>
			<button class="up btn btn-primary btn-block" type="button">上 移</button>
			<button class="down btn btn-primary btn-block" type="button">下 移</button>
			<button class="bottom btn btn-primary btn-block" type="button">最 后</button>
		</div>
	</div>
	<div class="sort_bottom form-group">
		<div class="col-md-12">
			<input id="input-ids" type="hidden" name="ids">
			<button class="sort_confirm btn submit-btn btn-primary" type="button">
				<i class="icon icon-save"></i> 保存
			</button>
			<button type="button" class="btn btn-default" data-dismiss="modal">
				<i class="icon icon-times"></i> 关闭
			</button>
		</div>
	</div>
</form>


<script type="text/javascript">
	$(function() {
		sort();
		$(".top").click(function() {
			rest();
			$(".option-ids:selected").prependTo("#select-sort");
			sort();
		})
		$(".bottom").click(function() {
			rest();
			$(".option-ids:selected").appendTo("#select-sort");
			sort();
		})
		$(".up").click(function() {
			rest();
			$(".option-ids:selected").after($(".option-ids:selected").prev());
			sort();
		})
		$(".down").click(function() {
			rest();
			$(".option-ids:selected").before($(".option-ids:selected").next());
			sort();
		})
		$(".search").click(function() {
			var v = $("input").val();
			$(".option-ids:contains(" + v + ")").attr('selected', 'selected');
		})
		function sort() {
			$('.option-ids').text(function() {
				return ($(this).index() + 1) + '.' + $(this).text()
			});
		}

		//重置所有option文字。
		function rest() {
			$('.option-ids').text(function() {
				return $(this).text().split('.')[1]
			});
		}

		//获取排序并提交
		$('.sort_confirm').click(function() {
			var arr = new Array();
			$('.option-ids').each(function() {
				arr.push($(this).val());
			});
			$('#input-ids').val(arr.join(','));
			$.post($('#form-sort').attr('action'), {'ids' : arr.join(',')
			}, function(data) {
				if (data.code) {
					var msg = new $.zui.Messager(data.msg, {
						placement : 'top',
						type : 'success'
					});
					msg.show();

				} else {
					var msg = new $.zui.Messager(data.msg, {
						placement : 'top',
						type : 'danger'
					});
					msg.show();
				}
				setTimeout(function() {
					if (data.url) {
						location.href = data.url;
					} else {
						$('.sort_cancel').click();
					}
				}, 2000);
			}, 'json');
		});

		//点击取消按钮
		$('.sort_cancel').click(function() {
			window.location.href = $(this).attr('url');
		});
	})
</script>
